<template>
	<div class="message">
		<div class="indHead">
			<div class="indHead-tab">
				<router-link to="/message2/all2"><span @click="under_line1">消息</span></router-link>
				<router-link to="/message2/like"><span @click="under_line2">喜欢</span></router-link>
			</div>
		</div>
		<div class="indBody">
			<router-view/>
		</div>
		<tabbar></tabbar>
	</div>
</template>

<script>
	import Tabbar from "../index/footer.vue"
	export default{
		components:{
    		Tabbar
    	},
		data() {
            return {
                
            }
        },
        methods:{
        	under_line1(){
        		this.$store.state.tabbar2[this.$store.state.tabbarIndex2].linkTo = "/message2/all";
        	},
        	under_line2(){
        		this.$store.state.tabbar2[this.$store.state.tabbarIndex2].linkTo = "/message2/like";
        	},
        }
	}
</script>

<style>
	.message{padding-top: 0.45rem;padding-bottom: 0.5rem;}
	.message .indHead{background-color: #FF5959;height: 0.45rem;position: fixed;top: 0;left: 0;width: 100%;text-align: center;z-index: 10;}
	.message .indHead-tab{line-height: 0.45rem;font-size: 0.16rem;}
	.message .indHead-tab span{line-height: 0.18rem;color: #FFC8C8;position: relative;margin: 0px 0.06rem;display: inline-block;}
	.message .indHead-tab .router-link-active span{color: #fff;}
	.message .indHead-tab .router-link-active span:after{content: "";width: 70%;height: 0.03rem;position: absolute;background-color: #fff;left: 15%;bottom: -7px;border-radius: 60px;}
	
	
	
</style>